<template>
	<view class="container">
		<view class="search-bar-section">
			<view class="search-bar-content">
				<text class="search-label">商品主编码</text>
				<input class="search-input" type="text" placeholder="请输入商品主编码或扫码" v-model="pageMainCode" @confirm="handleSearchConfirm" />
				<button class="scan-button" @click="scanCode">扫码</button>
			</view>
		</view>

		<view class="product-card-section">
			<image class="product-image" :src="product.picPath" @click="previewImage" mode="aspectFill"></image>
			<view class="product-info">
				<text class="product-title-label">商品标题：</text>
				<text class="product-title" @tap="copyToClipboard(product.title, '商品标题')">{{ product.title }}</text>
				<text class="product-mainCode-label">商品主编码：</text>
				<text class="product-mainCode" @tap="copyToClipboard(product.mainCode, '商品主编码')">{{ product.mainCode }}</text>
			</view>
		</view>

		<view class="product-classification-section">
			<view class="classification-content">
				<text class="classification-label">商品分类</text>
				<picker mode="multiSelector" :range="multiArray" :value="multiIndex" @change="onMultiPickerChange" @columnchange="onColumnChange">
					<view class="picker-text">
						{{ selectedCategoryText }}
					</view>
				</picker>
			</view>
		</view>

		<view class="specs-inventory-section">
			<view class="section-header">
				<text class="header-title">规格库存表</text>
				<button class="refresh-spec-button" @click="refreshSpecification">刷新</button>
				<button class="add-spec-button" @click="addSpecification">新增</button>
			</view>
			<view class="specs-table">
				<view class="table-row table-header">
					<text class="table-cell">颜色</text>
					<text class="table-cell">尺码</text>
					<text class="table-cell">规格编码</text>
					<text class="table-cell">库存</text>
					<text class="table-cell">操作</text>
				</view>
				<scroll-view scroll-y="true" class="specs-scroll-view">
					<view class="table-row" v-for="(spec, index) in stockStatusVoList" :key="index">
						<template v-if="!spec.isNew">
							<text class="table-cell">{{ spec.color }}</text>
							<text class="table-cell">{{ spec.size }}</text>
							<text class="table-cell" @tap="copyToClipboard(spec.skuOuterId, '商品规格编码')"
								:style="{color: spec.totalAvailableStockSum === 0 ? '#dc3545' : '#000000'}">{{ spec.skuOuterId }}</text>
							<input class="table-cell" v-model.number="spec.totalAvailableStockSum" placeholder="库存" type="number"
								:style="{color: spec.totalAvailableStockSum === 0 ? '#dc3545' : '#666666'}" />
							<text class="table-cell"></text>
						</template>
						<template v-else>
							<input class=" table-cell" v-model="spec.color" placeholder="颜色" style="color: #666666;" />
							<textarea class="table-cell" v-model="spec.size" placeholder="尺码" auto-height style="color: #666666;"></textarea>
							<text class="table-cell" @tap="copyToClipboard(product.mainCode + '#' + spec.color + '#' + spec.size, '商品规格编码'
								)" :style="{color: spec.totalAvailableStockSum === 0 ? '#dc3545' : '#000000'}">{{ product.mainCode + "#" + spec.color + "#" + spec.size }}</text>
							<input class="table-cell" v-model.number="spec.totalAvailableStockSum" placeholder="库存" type="number"
								:style="{color: spec.totalAvailableStockSum === 0 ? '#dc3545' : '#666666'}" />
							<text class="table-cell" @click="deleteSpecification(index)" style="color: #dc3545; cursor: pointer;">删除</text>
						</template>
					</view>
					<view v-if="stockStatusVoList.length === 0" class="no-data-placeholder">
						<text>暂无规格数据，点击“新增”添加</text>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="footer-buttons-section">
			<button class="save-button" @click="saveData">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		initConsoleOverride
	} from '@/utils/logger';
	import {
		debounce
	} from 'lodash';
	import {
		queryGoodsclassifications,
		queryWarehouse,
		queryGoodsSpec,
		addGoodsSpecification,
		editInventory
	} from '@/utils/fetchData';

	// 响应式数据
	const product = ref({
		title: '加载中...',
		mainCode: '等待商家编码',
		skuPicPath: ''
	});

	// API结果及相关响应式变量
	const pageMainCode = ref(null);
	const apiResults = ref({});
	const title = ref(null);
	const pic_path = ref(null);
	const itemCategoryNames = ref(null)
	const purchase_price = ref(null)
	const selling_price = ref(null)
	const supplier_codes = ref(null)

	const sys_item_id = ref(null);
	const sys_sku_id = ref(null);

	const warehouseData = ref(null);
	const warehouse_id = ref(null);
	const stock_num = ref(null);

	const goodsSpecData = ref(null);
	const stockStatusVoList = ref([]);

	const outer_id = ref(null);
	const sku_outer_id = ref(null);

	const nestedCategories = ref([]);
	const multiArray = ref([]);
	const multiIndex = ref([0, 0]);

	// 计算属性，显示当前选中的分类文本
	const selectedCategoryText = computed(() => {
		const parentIndex = multiIndex.value[0];
		const childIndex = multiIndex.value[1];

		if (!nestedCategories.value[parentIndex]) {
			return '请选择分类'; // 如果没有可用的分类，显示提示
		}

		const parent = nestedCategories.value[parentIndex];
		const child = parent.children[childIndex];

		// 如果有子分类，显示“父分类 - 子分类”，否则只显示父分类
		return child && child.name ? `${parent.name} - ${child.name}` : parent.name;
	});

	// 图片点击放大
	const previewImage = () => {
		uni.previewImage({
			current: product.value.picPath,
			urls: [product.value.picPath]
		})
	}

	// --- 方法 ---
	/**
	 * 获取商品分类
	 */
	const loadGoodsclassifications = async () => {
		uni.showLoading({
			title: '加载分类信息...'
		});

		const res = await queryGoodsclassifications();
		console.log(res)
		if (res && res.sellerCats) {
			// 通过 parentCid 和 cid 转换并保存嵌套数据
			const parents = res.sellerCats.filter(item => item.parentCid === 0);
			const children = res.sellerCats.filter(item => item.parentCid !== 0);
			nestedCategories.value = parents.map(parent => {
				const subCategories = children.filter(child => child.parentCid === parent.cid);
				return {
					...parent,
					children: subCategories.length > 0 ? subCategories : []
				};
			});
			// 初始化 picker 数据[默认选中第一个父分类的第一个子分类]
			if (nestedCategories.value.length === 0) {
				multiArray.value = [
					['暂无分类'],
					['']
				];
				multiIndex.value = [0, 0];
				return;
			}
			const firstColumn = nestedCategories.value.map(item => item.name);
			const initialSecondColumn = nestedCategories.value[0]?.children.map(item => item.name) || [''];
			multiArray.value = [firstColumn, initialSecondColumn];
			multiIndex.value = [0, 0];
			uni.showToast({
				title: '分类加载成功',
				icon: 'none',
				duration: 1500
			});
		} else {
			console.error("获取商品分类失败:", res?.message || '未知错误');
			uni.showToast({
				title: '分类加载失败',
				icon: 'error',
				duration: 2000
			});
		}

		uni.hideLoading();
	};

	/**
	 * 搜索框输入完点击完成后进行搜索
	 */
	const handleSearchConfirm = () => {
		if (pageMainCode.value) {
			queryProductDetails('outer-id', pageMainCode.value);
		} else {
			uni.showToast({
				title: '请输入商品主编码',
				icon: 'none',
				duration: 1500
			});
		}
	};

	/**
	 * 扫码
	 */
	const scanCode = debounce(() => {
		uni.scanCode({
			success: (res) => {
				uni.showToast({
					title: `扫码成功: ${res.result}`,
					icon: 'none'
				});
				// 调用api获取商品信息
				queryProductDetails('outer-id', res.result.split('#')[0]);
			},
			fail: (err) => {
				console.error('扫码失败:', err);
				uni.showToast({
					title: '扫码失败，请检查是否开放扫码权限',
					icon: 'none'
				});
			}
		});
	}, 500);

	/**
	 * 查找并设置分类选择器
	 * @param {number} idToSelect - 目标分类的 ID (可以是父分类或子分类的ID)
	 */
	const findAndSetCategory = (idToSelect) => {
		try {
			let parentIndex = -1;
			let childIndex = -1;
			let found = false;

			// 尝试首先作为子分类查找
			for (let i = 0; i < nestedCategories.value.length; i++) {
				const parent = nestedCategories.value[i];
				for (let j = 0; j < parent.children.length; j++) {
					const child = parent.children[j];
					if (child.id === idToSelect) {
						parentIndex = i;
						childIndex = j;
						found = true;
						break;
					}
				}
				if (found) break;
			}

			if (!found) {
				// 如果未作为子分类找到，则尝试作为父分类查找
				for (let i = 0; i < nestedCategories.value.length; i++) {
					const parent = nestedCategories.value[i];
					if (parent.id === idToSelect) {
						parentIndex = i;
						childIndex = 0; // 默认为第一个子分类或如果没有子分类则为0
						found = true;
						break;
					}
				}
			}

			if (found) {
				multiIndex.value = [parentIndex, childIndex];

				const selectedParent = nestedCategories.value[parentIndex];
				multiArray.value[1] = selectedParent.children.map(item => item.name) || [''];
				multiArray.value = [...multiArray.value]; // 确保响应式
			} else {
				console.warn(`未找到与 ID ${idToSelect} 匹配的分类。`);
			}
		} catch (error) {
			console.error('设置分类时发生错误:', error);
		}
	};


	/**
	 * 获取商品信息
	 */
	const queryProductDetails = async (mode, code) => {
		uni.showLoading({
			title: '加载商品信息...'
		});
		try {
			switch (mode) {
				case 'default-data':
					product.value = {
						title: '夏季穿搭洛丽塔蓬蓬在逃公主裙法式别致高级感轻奢迪士尼连衣裙女',
						mainCode: '2132552',
						picPath: '/static/default-product.jpg'
					};
					stockStatusVoList.value = [{
						color: '杏色',
						size: 's胸围94cm预估100斤内可穿',
						skuOuterId: '2132552#杏色#s胸围94cm预估100斤内可穿',
						totalAvailableStockSum: 10,
						isNew: false
					}, {
						color: '浅黄色',
						size: 'm胸围94cm预估100斤内可穿',
						skuOuterId: '2132552#浅黄色#m胸围94cm预估100斤内可穿',
						totalAvailableStockSum: 2,
						isNew: false
					}];
					break;
				case 'outer-id':
					pageMainCode.value = code // 搜索栏填充主编码
					product.value.mainCode = code; // 商品主编码

					// 查询规格信息
					goodsSpecData.value = await queryGoodsSpec(code);
					console.log("查询到的规格信息:", JSON.stringify(goodsSpecData.value));
					if (goodsSpecData.value?.stockStatusVoList?.length >= 1) {
						product.value.picPath = goodsSpecData.value.stockStatusVoList[0].picPath; // 商品图片【非主商品图片，skuPicPath需要在返回的商品信息筛选】
						product.value.title = goodsSpecData.value.stockStatusVoList[0].title; // 商品标题
						sys_item_id.value = goodsSpecData.value.stockStatusVoList[0].sysItemId; // 系统主商品ID
						sys_sku_id.value = goodsSpecData.value.stockStatusVoList[0].sysSkuId; // 系统商品skuID
						itemCategoryNames.value = goodsSpecData.value.stockStatusVoList[0].itemCategoryNames; // 分类
						purchase_price.value = goodsSpecData.value.stockStatusVoList[0].purchasePrice // 成本价
						selling_price.value = goodsSpecData.value.stockStatusVoList[0].sellingPrice // 销售价
						supplier_codes.value = goodsSpecData.value.stockStatusVoList[0].supplierCodes // 供应商编码

						// 规格分类
						console.log(JSON.stringify(goodsSpecData.value.stockStatusVoList[0]))
						if (itemCategoryNames.value) {
							let idToSet = null;
							if (itemCategoryNames.value.includes('/')) { // 包含斜杠，是二级分类
								const [parentName, childName] = itemCategoryNames.value.split('/');
								for (const parentCategory of nestedCategories.value) {
									if (parentCategory.name === parentName) {
										const foundChild = parentCategory.children.find(c => c.name === childName);
										if (foundChild) {
											idToSet = foundChild.id;
											break;
										}
									}
								}
							} else { // 不包含斜杠，是一级分类
								const parentName = itemCategoryNames.value;
								const foundParent = nestedCategories.value.find(p => p.name === parentName);
								if (foundParent) {
									idToSet = foundParent.id;
								}
							}

							if (idToSet !== null) {
								findAndSetCategory(idToSet);
							} else {
								console.warn(`未能在分类列表中找到匹配的分类名称: ${itemCategoryNames.value}`);
							}
						} else if (itemCategoryNames.value) {
							console.log('商品分类名称返回，但分类列表未加载完成，无法自动设置分类。');
						} else {
							console.log('商品分类名称未返回，无法自动设置分类。');
						}
						// 查询仓库
						const warehouseIdsMap = new Map();
						warehouseData.value = await queryWarehouse(code);
						if (warehouseData.value?.success && warehouseData.value.skus?.length >= 1) {
							console.log("查询仓库成功:", JSON.stringify(warehouseData.value));
							// 创建map，使用skuOuterId进行定义循环
							warehouseData.value.skus.forEach(sku => {
								warehouseIdsMap.set(
									sku.skuOuterId, // 商品规格编码
									sku.mainWareHousesStock[0].id); // 仓库id
							});
						} else {
							console.error('查询仓库失败:', warehouseData.value?.message || '无数据');
						}
						// 更新页面
						stockStatusVoList.value = goodsSpecData.value.stockStatusVoList.map(item => {
							let color = '';
							let size = '';

							if (item.propertiesName.includes(';')) {
								[color, size] = item.propertiesName.split(';');
							} else if (item.propertiesName.includes('色')) {
								color = item.propertiesName;
							} else if (/\d/.test(item.propertiesName)) {
								size = item.propertiesName;
							}

							return {
								color: color,
								size: size,
								skuOuterId: item.skuOuterId,
								totalAvailableStockSum: item.totalAvailableStockSum,
								propertiesName: item.propertiesName,
								purchasePrice: item.purchasePrice,
								sellingPrice: item.sellingPrice,
								supplierCodes: item.supplierCodes,
								warehouseId: warehouseIdsMap.get(item.skuOuterId),
								isNew: false
							};
						});
						console.log("已更新规格:", JSON.stringify(stockStatusVoList.value));
					} else {
						console.warn('商品规格数据为空或获取失败。');
						stockStatusVoList.value = []; // 如果没有数据，清空规格
					}
					break;
				default:
					uni.showToast({
						title: '未找到商品信息',
						icon: 'none',
						duration: 2000
					});
					product.value = {
						title: '未找到商品',
						mainCode: 'N/A',
						skuPicPath: ''
					};
					stockStatusVoList.value = [];
					break;
			}
		} catch (error) {
			console.error("查询商品详情失败:", error);
			uni.showToast({
				title: '加载商品信息失败',
				icon: 'error',
				duration: 2000
			});
		} finally {
			uni.hideLoading();
		}
	};

	/**
	 * 处理多列选择器列变化（滑动）
	 */
	const onColumnChange = (e) => {
		const {
			column,
			value
		} = e.detail;

		// 如果是第一列（父分类）发生变化
		if (column === 0) {
			multiIndex.value[0] = value; // 更新父分类的选中索引
			const selectedParent = nestedCategories.value[value];

			if (selectedParent && selectedParent.children.length > 0) {
				// 更新第二列数据为新选中的父分类的子分类
				multiArray.value[1] = selectedParent.children.map(item => item.name);
				multiIndex.value[1] = 0; // 重置子分类的选中索引为0
			} else {
				// 如果新选中的父分类没有子分类，则清空第二列并重置子分类索引
				multiArray.value[1] = [''];
				multiIndex.value[1] = 0;
			}
		} else if (column === 1) {
			// 如果是第二列（子分类）发生变化
			multiIndex.value[1] = value; // 更新子分类的选中索引
		}
	};

	/**
	 * 处理多列选择器确认选择
	 */
	const onMultiPickerChange = (e) => {
		multiIndex.value = e.detail.value; // 获取最终选中的索引数组

		const parentIndex = multiIndex.value[0];
		const childIndex = multiIndex.value[1];

		const selectedParent = nestedCategories.value[parentIndex];
		const selectedChild = selectedParent?.children[childIndex];

		console.log('最终选中的父分类:', JSON.stringify(selectedParent), '最终选中的子分类:', JSON.stringify(selectedChild));
	};



	/**
	 * 发送网络请求来保存数据
	 */
	const saveData = debounce(async () => {
		// 检查选中的分类
		const selectedParentCategory = nestedCategories.value[multiIndex.value[0]];
		if (selectedParentCategory.name === "未分类") {
			uni.showToast({
				title: '请选择分类后再次点击保存',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		// 检查库存表内容【应客户要求老产品不检查规格信息的有效性，因为颜色改不了】
		for (const spec of stockStatusVoList.value) {
			if (spec.isNew) {
				if (!spec.color || !spec.size || !spec.skuOuterId || spec.totalAvailableStockSum === null || spec.totalAvailableStockSum < 0) {
					uni.showToast({
						title: '请填写完整的规格信息（颜色、尺码、规格编码、库存需有效）',
						icon: 'none',
						duration: 2500
					});
					return;
				}
			}
		}
		// 组织信息
		const addGoodsSpecData = []
		for (const spec of stockStatusVoList.value) {
			if (spec.isNew) {
				addGoodsSpecData.push({
					color: spec.color,
					size: spec.size,
					propertiesName: spec.color + ';' + spec.size,
					outerId: product.value.mainCode + '#' + spec.color + '#' + spec.size,
					totalAvailableStockSum: spec.totalAvailableStockSum,
					purchasePrice: spec.purchasePrice,
					sellingPrice: spec.sellingPrice,
					weight: 0.5,
					suppliers: {
						code: spec.supplierCodes,
					},
					warehouseId: spec.warehouseId,
				})
			}
		}
		let sellerCids = 0;
		if (nestedCategories.value[multiIndex.value[0]].children.length === 0) {
			// 父分类必须用id作为分类标识
			sellerCids = nestedCategories.value[multiIndex.value[0]].cid;
		} else {
			// 子分类用cid作为分类标识
			sellerCids = nestedCategories.value[multiIndex.value[0]].children[multiIndex.value[1]].cid;
		}
		// console.log('层叠分类表:', JSON.stringify(nestedCategories.value))
		// console.log('sellerCids:', sellerCids)
		console.log('准备保存的数据:', addGoodsSpecData);
		// api调用
		uni.showLoading({
			title: '保存中...'
		});
		const response = await addGoodsSpecification(0, product.value.mainCode, product.value.title, sellerCids, addGoodsSpecData)
		let editInventoryRes = -1;
		for (const spec of stockStatusVoList.value) {
			editInventoryRes = await editInventory(spec.warehouseId, spec.totalAvailableStockSum, product.value.mainCode + '#' + spec.color + '#' + spec.size)
			console.log(editInventoryRes)
		}
		console.log("\n保存返回数据信息:", JSON.stringify(response));
		uni.hideLoading();
		uni.showToast({
			title: '数据已成功保存',
			icon: 'success',
			duration: 2000
		});
	}, 500);

	/**
	 * 刷新规格
	 */
	const refreshSpecification = debounce(() => {
		queryProductDetails('outer-id', pageMainCode.value);
	}, 500)

	/**
	 * 新增规格
	 */
	const addSpecification = () => {
		// 确保至少有一个现有规格可以作为模板，或者提供默认值
		const defaultSpec = stockStatusVoList.value.length > 0 ?
			stockStatusVoList.value[0] : {
				color: '颜色',
				size: '尺码',
				skuOuterId: '规格编码',
				totalAvailableStockSum: 0
			};

		stockStatusVoList.value.push({
			...defaultSpec,
			isNew: true,
		});
		console.log("新增一行信息")
		uni.showToast({
			title: '已新增一行',
			icon: 'none',
			duration: 1000
		});
	};

	/**
	 * 删除规格
	 */
	const deleteSpecification = (index) => {
		uni.showModal({
			title: '确认删除',
			content: '确定要删除此规格吗？',
			success: (res) => {
				if (res.confirm) {
					console.log("\n已删除规格:", JSON.stringify(stockStatusVoList.value[index]));
					stockStatusVoList.value.splice(index, 1);
					uni.showToast({
						title: '已删除一行',
						icon: 'none',
						duration: 1000
					});
				}
			}
		});
	};

	/**
	 * 复制文本到剪贴板并冒泡通知
	 * @param {string} text - 要复制的文本
	 * @param {string} fieldName - 被复制的区域的名字
	 */
	const copyToClipboard = (text, fieldName) => {
		if (!text) {
			uni.showToast({
				title: `无可复制的${fieldName}`,
				icon: 'none',
				duration: 1500
			});
			return;
		}
		uni.setClipboardData({
			data: text,
			success: () => {
				console.log(`已复制${fieldName}: ${text}`)
				uni.showToast({
					title: `已复制${fieldName}`,
					icon: 'none',
					duration: 1500
				});
			},
			fail: (err) => {
				console.error('复制到剪贴板失败:', err);
				uni.showToast({
					title: `复制${fieldName}失败`,
					icon: 'none',
					duration: 1500
				});
			}
		});
	};

	// 生命周期钩子
	onMounted(() => {
		loadGoodsclassifications().then(() => {
			// 初始化console重写
			initConsoleOverride();
			// 确保分类加载完成后再尝试查询依赖于分类的商品详情
			queryProductDetails('default-data', 0); // 真实 API 调用示例
		});
	});
</script>

<style lang="scss">
	$background-color: #f5f5f5;
	$card-background: #fff;

	$primary-color: #3399CC;
	$add-color: #99CC33;
	$border-color: #eee;

	$text-color-dark: #000000;
	$text-color-light: #CCCCCC;

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: $background-color;
		padding: 0;
	}

	.search-bar-section,
	.product-card-section,
	.footer-buttons-section {
		background-color: $card-background;
		padding: 10px 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	// 搜索栏
	.search-bar-section {
		padding-top: auto;
		padding-bottom: 10px;

		.search-bar-content {
			display: flex;
			align-items: center;

			.search-label {
				margin-right: 10px;
				flex-shrink: 0;
				/* Prevent label from shrinking */
			}

			.search-input {
				flex: 1;
				height: 36px;
				border: 1px solid #ccc;
				border-radius: 5px;
				padding: 0 10px;
				font-size: 14px;
			}

			.scan-button {
				background-color: $primary-color;
				color: #fff;
				padding: 0 15px;
				height: 36px;
				line-height: 36px;
				font-size: 14px;
				border-radius: 5px;
				margin-left: 10px;
				flex-shrink: 0;
			}
		}
	}

	// 产品卡片
	.product-card-section {
		display: flex;
		margin: 8px 8px 0 8px;
		padding: 8px;
		background-color: $card-background;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

		.product-image {
			width: 110px;
			height: 110px;
			border-radius: 5px;
			margin-right: 15px;
			background-color: $border-color;
			flex-shrink: 0;
		}

		.product-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.product-title-label,
			.product-mainCode-label {
				font-size: 16px;
			}

			.product-title,
			.product-mainCode {
				font-size: 14px;
				color: $primary-color;
				margin-bottom: 5px;
			}
		}
	}

	// 产品分类部分
	.product-classification-section {
		margin: 8px 8px 0 8px;
		padding: 10px 15px;
		background-color: $card-background;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		display: flex; // 使用 flex 布局
		align-items: center; // 垂直居中

		.classification-content {
			flex: 1; // 占据剩余空间
			display: flex;
			align-items: center;
			justify-content: space-between; // 标签、选择器、复制按钮之间均匀分布

			.classification-label {
				font-size: 14px;
				color: $text-color-dark;
				flex-shrink: 0; // 防止标签收缩
			}

			.picker-text {
				font-size: 14px;
				color: $primary-color;
				// 避免文本过长导致省略号或换行
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%; // 确保文本占据可用空间，以便省略号生效
			}
		}
	}

	// 规格清单部分
	.specs-inventory-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: $card-background;
		margin: 8px;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			padding-bottom: 8px;
			border-bottom: 1px solid $border-color;

			.header-title {
				flex-grow: 1;
				font-size: 16px;
				font-weight: bold;
				color: $text-color-dark;
			}

			.refresh-spec-button,
			.add-spec-button {
				margin-left: 5px;
				color: #fff;
				padding: 0 12px;
				height: 32px;
				font-size: 13px;
				border-radius: 5px;
				flex-shrink: 0;
			}

			.refresh-spec-button {
				background-color: $primary-color;
			}

			.add-spec-button {
				background-color: $add-color;
			}
		}

		.specs-table {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;

			.table-header {
				background-color: #f8f8f8;
				font-weight: bold;
				border-bottom: 1px solid $border-color;
				padding: 10px 0;

				.table-cell {
					text-align: center;
					width: 100%;
					padding: 0 5px;

					// Adjusted flex values for 5 columns
					&:nth-child(1) {
						flex: 0.4;
					}

					&:nth-child(2) {
						flex: 1.6;
					}

					&:nth-child(3) {
						flex: 1.8;
					}

					&:nth-child(4) {
						flex: 0.4;
					}

					&:nth-child(5) {
						flex: 0.4;
					}
				}
			}

			.table-row {
				display: flex;
				align-items: center;
				border-bottom: 1px solid $border-color;
				padding: 8px 0;

				.table-cell {
					flex: 1;
					text-align: center;
					font-size: 13px;
					color: $text-color-dark;
					padding: 0 5px;


					// 文本长度占据
					&:nth-child(1) {
						flex: 0.4;
					}

					&:nth-child(2) {
						flex: 1.6;
					}

					&:nth-child(3) {
						flex: 1.8;
					}

					&:nth-child(4) {
						flex: 0.4;
					}

					&:nth-child(5) {
						flex: 0.4;
					}

				}

				// 移除表格最后一行的下边框
				&:last-of-type {
					border-bottom: none;
				}
			}
		}

		.specs-scroll-view {
			flex: 1;
			height: 0;
		}

		.no-data-placeholder {
			text-align: center;
			padding: 20px;
			color: $text-color-light;
			font-size: 14px;
		}
	}

	// 保存按钮
	.footer-buttons-section {
		padding: 5px;
		margin-top: auto;
		border-top: 1px solid $border-color;

		.save-button {
			background-color: $primary-color;
			color: #fff;
			width: 100%;
			padding: 5px 0;
			font-size: 14px;
			border-radius: 8px;
			text-align: center;
			// 手动调整字符间距
			letter-spacing: 100px; // 调整这个值，使两个字符均匀分布
			padding-left: 100px; // 可选：平衡视觉间距
		}
	}
</style>